@extends('layouts.article')

@section('articleContent')
    <li style="margin: 50px 0;">
        <div class="title">
            <a href="{{ url('blog/article/'.$article->article_id) }}">
                <h4>{{ $article->title }}</h4>
            </a>
        </div>
        <div class="body">
            <div id="ql-editor">
                
            </div>
        </div>
        <div class="btn">
            <p>编辑</p>
        </div>
    </li>
@endsection

@section('bodyScript')
<script>
// var QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;
 
function quillGetHTML(inputDelta) {
    var tempCont = document.createElement("div");
    (new Quill(tempCont)).setContents(inputDelta);
    return tempCont.getElementsByClassName("ql-editor")[0].innerHTML;
}
// TypeScript / ES6:
// import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'; 
 
var deltaOps =  {!! $article->body !!};
 
// var cfg = {};
 
// var converter = new QuillDeltaToHtmlConverter(deltaOps, cfg);
 
// var html = converter.convert(); 
var editor = document.querySelector('#ql-editor');
editor.innerHTML = quillGetHTML(deltaOps);
</script>
@endsection